<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../000-assets/cdn/axios.min.js"></script>
</head>

<body>
    <script>
        // 先来复习下Promise.all，如果all()里面的promise有一个是失败的，那么就会走catch，导致里面成功的promise实例也"被霍霍了"，怎么解决呢?
        Promise.all([axios.get('./data.json'), axios.get('./data2.json'), axios.get('./data3.json')])
            .then(res => {
                console.log('all',res);
            })
            .catch(err => {
                console.log('all',err);
                console.log('----------------------------------------');
            })



        // Promise.allSettled(), 会将所有的promise实例无论成功或是失败，都在then中以数组形式将这些promise实例返回, 我们可以根据这些实例的status去筛选出成功的实例，然后取到他们的返回值即可。所以.catch可以不写了. 具体请看下面的演示
        Promise.allSettled([axios.get('./data.json'), axios.get('./data2.json'), axios.get('./data3.json')])
            .then(res => {
                console.log('allSettled',res);
                // 筛选出所有成功的promise实例
                res = res.filter(item => item.status == "fulfilled");
                // 最后筛选出成功的promise实例中对我们有用的数据
                let datas = res.map(item => item.value.data);
                console.log(datas); //拿到数据
            })
    </script>
</body>

</html>